<template>
	<view>
		<u-navbar back-icon-color="#ffffff" title="填写订单" title-color="#ffffff" :background="background"></u-navbar>
		<view class="content">
			<view class="address" v-if="addressList != null" @click="chooseAddres()">
				<view class="address-left">
					<view class="address-left-title u-line-2">
						<text v-show="addressList.defaultSign"><u-tag text="默认" size="mini" type="success" /></text>
						{{ addressList.address }}
					</view>
					<view class="address-left-con">
						<text>{{ addressList.receiver }}</text>
						<text>{{ addressList.phoneNum }}</text>
					</view>
				</view>
				<view class="address-right"><u-icon name="arrow-right" color="#909399" size="30"></u-icon></view>
			</view>
			<view class="address" v-else @click="chooseAddres()">
				<view class="address-left">暂未设置默认地址请选择收获地址</view>
				<view class="address-right"><u-icon name="arrow-right" color="#909399" size="30"></u-icon></view>
			</view>
			<view class="payType">
				<view class="payType-top">
					<view>支付方式</view>
					<view>仅支持线下支付</view>
				</view>
				<view class="payType-bm">
					<view>
						<u-icon name="info-circle"></u-icon>
						<text>订单款项全部由配送专员代为收取</text>
					</view>
					<view style="padding-top: 8rpx;">
						<u-icon name="info-circle"></u-icon>
						<text>特价商品不参与任何优惠活动</text>
					</view>
				</view>
			</view>
			<view class="goodsGroup">
				<view class="goodsGroup-title">商品组:由平台统一配送</view>
				<view class="goodsGroup-time">
					<view>预计配送时间</view>
					<view>
						<u-tag text="次日达" type="primary" size="mini" mode="light" />
						<!-- <text class="u-p-l-10">10：00</text> -->
					</view>
				</view>
				<view class="goodsGroup-time" @click="goOrderCoupon()">
					<view>可用优惠券</view>
					<view>
						<text class="u-p-r-16" v-if="couponList">{{ couponList.length }}张</text>
						<text class="u-p-r-16" v-else>暂无</text>
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="goodsGroup-time" v-show="selectCoupon">
					<view>使用优惠券</view>
					<view>
						<text v-if="selectCoupon.discountType == 0" class="u-p-r-16">
							<text v-if="selectCoupon.discount">满减￥{{ selectCoupon.discount }}券</text>
						</text>
						<text v-else class="u-p-r-16">
							<text v-if="selectCoupon.discount">{{ selectCoupon.discount }}折券</text>
						</text>
					</view>
				</view>
				<view class="goodsGroup-time-remarks">
					<view class="u-p-b-8">备注信息</view>
					<view>
						<u-input v-model="remarks" type="textarea" :border="true" height="100" :auto-height="true" placeholder="备注" />
						<!-- <text class="u-p-r-16">{{ selectCoupon.discount }}折券</text> -->
					</view>
				</view>
				<block v-for="(item, index) in orderList" :key="item.id">
					<view class="goods-list">
						<view class="goods-item">
							<u-row gutter="16">
								<u-col span="2" class="goods-item-img"><image style="width: 90rpx; height: 90rpx;" :src="item.img" shape="circle"></image></u-col>
								<u-col span="7" class="goods-item-con">
									<view class="goods-item-con-title">{{ item.name }}<u-tag v-show="item.specialOffer == 1" size="mini" text="特价" type="warning" mode="light"/></view>
									<view class="goods-item-con-price">
										<text>￥{{ item.unitPrice }}</text>
										/
										<text>{{ item.specValues }}</text>
									</view>
								</u-col>
								<u-col span="3">
									<view class="goods-item-price">
										{{ item.count }}{{ item.unit }}/
										<text>￥{{ (item.unitPrice * item.count).toFixed(2) }}</text>
									</view>
								</u-col>
							</u-row>
							<u-line color="#e4e7ed" />
						</view>
					</view>
				</block>
				<view v-if="giftGoods">
					<view class="u-p-b-8">赠品</view>
					<view v-for="(item, index) in giftGoods" :key="item.id">
						<view class="gift-goods-item">
							<view>{{ item.ycGoodsSku.ycGoods.name }}</view>
							<view>
								<text>{{ item.count }}</text>
								{{ item.ycGoodsSku.unit }}
							</view>
						</view>
					</view>
				</view>
				<view class="orderTotalPrice">
					<text>订单合计金额：￥{{ orderTotalPrice }}</text>
				</view>
			</view>
		</view>
		<u-gap height="30" bg-color="#f3f4f6"></u-gap>
		<view class="navigation">
			<view class="left">
				<view>
					共优惠
					<text>￥{{ sum.disPrice }}</text>
				</view>
			</view>
			<view class="right">
				<view class="right-price">
					应付款
					<text>￥{{ sum.sumPrice }}</text>
				</view>
				<view class="buy btn u-line-1" @click="openModal()">提交订单</view>
			</view>
		</view>
		<view><u-modal v-model="show" :content="content" :mask-close-able="true" :show-cancel-button="true" @confirm="creatOrder()"></u-modal></view>
		<view><u-toast ref="uToast" /></view>
		<view><u-modal v-model="showEro" :content="contentEro" confirm-text="返回" @confirm="goBack()"></u-modal></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '订单款项全部由配送专员代为收取',
			background: {
				backgroundImage: 'linear-gradient(90deg, rgb(0,164,133), rgb(51,241,205))'
			},
			orderList: [],
			orderTotalPrice: 0,
			userInfo: {},
			addressList: {},
			//模态框
			show: false,
			content: '',
			showEro: false,
			contentEro: '',
			catIds: [],
			//
			couponList: [],
			//
			selectCouponId: '',
			selectCoupon: {},
			//
			sum: {
				disPrice: 0,
				sumPrice: 0
			},
			//备注
			remarks: '',
			//赠品
			giftGoods: []
		};
	},
	onLoad(op) {
		try {
			const token = uni.getStorageSync('token');
			if (token) {
				this.userInfo = uni.getStorageSync('userInfo');
				if(!this.userInfo){
					//#ifdef APP-PLUS
					uni.reLaunch({
						url: '/pages/login/index'
					});
					//#endif
					//#ifdef MP-WEIXIN
					uni.reLaunch({
						url: '/pages/login/xcxLogin'
					});
					//#endif
				}
				const order_select_coupon_index = uni.getStorageSync('order_select_coupon_index');
				console.log('order_select_coupon_index======================');
				console.log(order_select_coupon_index);
				const order_coupon_list = uni.getStorageSync('order_coupon_list');
				console.log('order_coupon_list======================');
				console.log(order_coupon_list);
				if (order_select_coupon_index.toString() != '') {
					console.log('2222222222');
					if (order_select_coupon_index != null && order_coupon_list) {
						this.selectCoupon = order_coupon_list[order_select_coupon_index];
						this.selectCouponId = order_coupon_list[order_select_coupon_index].id;
						console.log('selectCoupon=====');
						console.log(this.selectCoupon);
					}
				} else {
					console.log('111111111111');
					this.selectCoupon = '';
					this.selectCouponId = '';
				}
				//
				const cartIds = uni.getStorageSync('cart_ids');
				console.log('cart_ids==');
				console.log(cartIds);
				if (op.catIds) {
					if (cartIds) {
						uni.removeStorageSync('cart_ids');
					}
					this.catIds = op.catIds.split(',');
					uni.setStorageSync('cart_ids', this.catIds);
					this.getOrderInfo(2, this.catIds);
				} else {
					if (cartIds) {
						this.catIds = cartIds;
						this.getOrderInfo(2, cartIds);
					} else {
						this.$refs.uToast.show({
							title: '订单信息有误',
							type: 'error',
							url: '/pages/order/index'
						});
					}
				}
				//
				this.searchReceiver(this.userInfo.id);
			} else {
				//#ifdef APP-PLUS
				uni.reLaunch({
					url: '/pages/login/index'
				});
				//#endif
				//#ifdef MP-WEIXIN
				uni.reLaunch({
					url: '/pages/login/xcxLogin'
				});
				//#endif
			}
		} catch (e) {
			// error
		}
	},
	onShow() {
		this.searchReceiver(this.userInfo.id);
	},
	methods: {
		getOrderInfo(type, catIds) {
			let _t = this;
			_t.$u.api.getWriteOrderInfo({ type: type, catIds: catIds }).then(res => {
				console.log('getWriteOrderInfo=============');
				console.log(res);
				if (res.data.status == 400) {
					_t.showEro = true;
					_t.contentEro = res.data.message;
				} else {
					_t.orderTotalPrice = res.data.totalPrice;
					_t.orderList = res.data.ycGoodsOrderVos;
					_t.couponList = res.data.coupont;
					uni.setStorageSync('order_coupon_list', res.data.coupont);
					console.log(_t.selectCouponId);
					_t.showPrice(type, _t.addressList.id, catIds, _t.selectCouponId);
				}

				/* const order_coupon_list = uni.getStorageSync('order_coupon_list');
				if (order_coupon_list) {
					uni.removeStorageSync('order_coupon_list');
				} */
			});
		},
		searchReceiver(userId) {
			this.$u.api.searchReceiver({ userId: userId, defaultSign: 1 }).then(res => {
				if (res.data.content.length == 0) {
					this.addressList = null;
				} else {
					this.addressList = res.data.content[0];
				}
			});
		},
		chooseAddres() {
			this.$u.route({
				type: 'to',
				//params: this.params,
				url: '/pages/address/index'
			});
		},
		openModal() {
			let _t = this;
			if (_t.sum.sumPrice < 100) {
				_t.$refs.uToast.show({
					title: '警告：订单未满100元,无法提交订单',
					type: 'error'
				});
			} else {
				if (_t.addressList == null) {
					_t.$refs.uToast.show({
						title: '警告：未设置收获地址,无法提交订单',
						type: 'error'
					});
				} else {
					_t.show = true;
					_t.content = '确认提交订单!';
				}
			}
		},
		creatOrder() {
			let _t = this;
			console.log('creatOrder=======');
			console.log(_t.catIds);
			_t.$u.api.submitOrder({ receiveId: _t.addressList.id, type: 2, catIds: _t.catIds, couponId: _t.selectCoupon.id, remarks: _t.remarks }).then(res => {
				console.log('submitOrder');
				console.log(res);
				if (res.data.status == 400) {
					_t.$refs.uToast.show({
						title: res.data.message,
						type: 'error'
					});
				} else {
					_t.removeStorageSync();
					_t.$u.route({
						type: 'to',
						params: { orderSn: res.data, orderSn: res.data.payPrice },
						url: '/pages/status/success'
					});
				}
			});
		},
		submitOrder(receiveId, type) {
			this.$u.api.submitOrder({ receiveId: receiveId, type: type }).then(res => {
				console.log('getWriteOrderInfo');
				console.log(res);
				this.orderTotalPrice = res.data.totalPrice;
				this.orderList = res.data.ycGoodsOrderVos;
			});
		},
		goBack() {
			this.$u.route({
				type: 'back'
			});
		},
		//
		goOrderCoupon() {
			let _t = this;
			this.$u.route({
				type: 'to',
				//params: { couponList: coupon },
				url: '/pages/coupon/orderCoupon'
			});
		},
		//优惠计算
		showPrice(type, receiveId, catIds, couponId) {
			let _t = this;
			console.log('showPrice====================');
			console.log(type);
			console.log(receiveId);
			console.log(catIds);
			console.log(couponId);
			console.log('showPrice====================');
			_t.$u.api.showPrice({ receiveId: receiveId, type: type, catIds: catIds, couponId: couponId }).then(res => {
				console.log('showPrice====================');
				console.log(res);
				if (res.statusCode == 200) {
					_t.sum.disPrice = res.data.discountsPrice ? res.data.discountsPrice : '0.00';
					_t.sum.sumPrice = res.data.payPrice ? res.data.payPrice : '0.00';
					//赠品
					_t.giftGoods = res.data.giftGoods;
					console.log(_t.giftGoods);
				} else {
					_t.sum.disPrice = '0.00';
					_t.sum.sumPrice = '0.00';
					_t.$refs.uToast.show({
						title: '警告：订单未满100元',
						type: 'error'
					});
				}
				console.log('showPrice====================');
			});
		},
		discount(type, discount, price) {
			console.log('discount===========');
			console.log(type);
			console.log(discount);
			console.log(price);
			//type 0为金额，1为折扣
			let _t = this;
			if (type == 0) {
				_t.sum.disPrice = Number(discount).toFixed(2);
				_t.sum.sumPrice = (Number(price) - Number(discount)).toFixed(2);
			}
			if (type == 1) {
				_t.sum.sumPrice = (Number(price) * (Number(discount) / 10)).toFixed(2);
				_t.sum.disPrice = (Number(price) - Number(_t.sum.sumPrice)).toFixed(2);
				//_t.sum.disPrice = discount;
				//_t.sum.sumPrice = Number(price);
			}
			console.log(_t.sum);
		},
		//
		removeStorageSync() {
			uni.removeStorageSync('order_coupon_list');
			uni.removeStorageSync('order_select_coupon_index');
			uni.removeStorageSync('cart_ids');
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f3f4f6;
}
.content {
	.address {
		padding: 30rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;

		.address-left {
			width: 90%;
			padding-right: 30rpx;
			.address-left-title {
				font-size: 34rpx;
				font-weight: bold;
				padding-bottom: 10rpx;
				text {
					padding-right: 10rpx;
					font-weight: normal;
					font-size: 28rpx !important;
				}
			}
			.address-left-con {
				font-size: 26rpx;
				text {
					padding-right: 10rpx;
				}
			}
		}
		.address-right {
		}
	}
	.payType {
		margin: 30rpx 20rpx 0 20rpx;
		background-color: #ffffff;
		.payType-top {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 30rpx;
			font-size: 26rpx;
			font-weight: bold;
		}
		.payType-bm {
			padding: 20rpx 30rpx;
			background-color: $u-type-warning-light;
			color: $u-type-warning;
			font-size: 26rpx;
			text {
				padding-left: 10rpx;
			}
		}
	}
	.goodsGroup {
		margin: 20rpx 20rpx 140rpx 20rpx;
		background-color: #ffffff;
		padding: 10rpx 30rpx;
		.goodsGroup-title {
			font-weight: bold;
			font-size: 28rpx;
			padding: 20rpx 0;
			border: 1px solid #e4e7ed;
			border-style: none none solid none;
		}
		.goodsGroup-time {
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			padding: 20rpx 0;
			border: 1px solid #e4e7ed;
			border-style: none none solid none;
		}
		.goodsGroup-time-remarks {
			padding: 20rpx 0;
			border: 1px solid #e4e7ed;
			border-style: none none solid none;
		}
		.goods-list {
			.goods-item {
				margin: 20rpx 0;
				.goods-item-price {
					font-size: 26rpx;
					color: $u-content-color;
					text {
						color: $u-type-warning;
					}
				}
				.goods-item-con-title {
					font-weight: bold;
					padding-bottom: 10rpx;
				}
				.goods-item-con-price {
					font-size: 22rpx;
					padding-bottom: 10rpx;
					text {
						padding-right: 4rpx;
					}
				}
			}
		}
		.orderTotalPrice {
			padding: 20rpx 0;
			text-align: right;
			//background-color: $u-type-warning-light;
			color: $u-type-warning;
			font-size: 28rpx;
			text {
				padding-left: 10rpx;
			}
		}
		.gift-goods-item {
			padding: 10rpx 20rpx;
			display: flex;
			justify-content: space-between;
		}
	}
}
.navigation {
	position: fixed;
	bottom: 0;
	width: 100%;
	display: flex;
	justify-content: space-between;
	margin-top: 100rpx;
	border: solid 2rpx #f2f2f2;
	background-color: #ffffff;
	padding: 20rpx;
	.left {
		display: flex;
		font-size: 20rpx;
		text {
			color: $u-type-warning;
			padding-left: 10rpx;
		}
		.item {
			margin: 0 30rpx;
			&.car {
				text-align: center;
				position: relative;
				.car-num {
					position: absolute;
					top: -10rpx;
					right: -10rpx;
				}
			}
		}
	}
	.right {
		display: flex;
		font-size: 28rpx;
		align-items: center;
		.right-price {
			padding-right: 20rpx;
			text {
				color: $u-type-warning;
				font-weight: bold;
				font-size: 32rpx;
				padding-left: 10rpx;
			}
		}
		.btn {
			line-height: 66rpx;
			padding: 0 30rpx;
			border-radius: 36rpx;
			color: #ffffff;
		}
		.cart {
			background-color: #ed3f14;
			margin-right: 30rpx;
		}
		.buy {
			background-color: #ff7900;
		}
	}
}
</style>
